import { Image, Form, Input, Button, Toast } from "antd-mobile";
import Styles from "./login.module.css"
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { userLogin } from '../api/user'
function Login() {
    const navigate = useNavigate();
    const [form, setForm] = useState({
        email: "",
        password: ""
    })
    function toRegiter() {
        navigate('/register')
    }
    function submitForm() {
        console.log(form, "form")
        userLogin({ ...form }).then(res => {
            localStorage.setItem("access",res.data.access_token);
            localStorage.setItem("refresh",res.data.refresh_token);
            if (res.code == 200) {
                navigate('/main')
                Toast.show({
                    icon: 'success',
                    content: '登陆成功',
                })
            }
        }).catch(err => {
            console.log(err, "err")
        })
    }
    return (
        <div className={Styles.Login}>
            <Image src={require("../assets/logo.jpg")} className={Styles.pictures} />

            <Form layout='horizontal' mode='card'>
                <Form.Item label='邮箱地址'>
                    <Input placeholder='请输入' onChange={(e) => {
                        setForm({
                            ...form,
                            email: e
                        })
                    }} />
                </Form.Item>
                <Form.Item label='用户密码'>
                    <Input placeholder='请输入' type="password" onChange={(e) => {
                        setForm({
                            ...form,
                            password: e
                        })
                    }} />
                </Form.Item>
                <Form.Header />
            </Form>
            <div className={Styles.btn}>
                <Button block color='primary' size='large' onClick={submitForm}>
                    登录
                </Button>
                <Button onClick={toRegiter} block color='primary' fill='outline' size='large'>
                    注册
                </Button>
            </div>
        </div>
    )
}
export default Login;